{% extends 'base/base1.html' %}

{% block title %}商品图片展示{% endblock %}

{% block main %}
<div class="container">
    <h1 class="text-center mt-5 mb-3">商品图片展示</h1>
    <div class="text-right mb-4">
        <a href="{% url 'main:product_image_create' %}" class="btn btn-success">添加图片</a>
    </div>
    
    <div class="row">
        {% for image in image_list %}
            <div class="col-md-3 mb-4">
                <div class="product-image-card">
                    <img src="{{ image.image.url }}" alt="{{ image.alt_text }}"
                         class="product-thumbnail img-responsive">
                    <div class="product-name text-center mt-2">
                        {{ image.alt_text|default:"图片" }}
                        {% if image.is_main %}<span class="badge badge-primary">主图</span>{% endif %}
                    </div>
                    <div class="text-center mt-2">
                        <a href="{% url 'main:product_image_update' image.pk %}" class="btn btn-sm btn-warning">编辑</a>
                        <a href="{% url 'main:product_image_delete' image.pk %}" class="btn btn-sm btn-danger">删除</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    
    <!-- 分页 -->
    <div class="pagination-container text-center mt-5">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li><a href="?pn={{ page_obj.previous_page_number }}">&laquo;</a></li>
            {% else %}
                <li class="disabled"><span>&laquo;</span></li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="active"><span>{{ num }} <span class="sr-only">(current)</span></span></li>
                {% else %}
                    <li><a href="?pn={{ num }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
                <li><a href="?pn={{ page_obj.next_page_number }}">&raquo;</a></li>
            {% else %}
                <li class="disabled"><span>&raquo;</span></li>
            {% endif %}
        </ul>
    </div>
</div>

<style>
.product-image-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    height: 100%;
    transition: transform 0.3s ease;
}

.product-image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.image-link {
    display: block;
    text-decoration: none;
}

.product-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.product-name {
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
{% endblock %}